<template>
    <div class="student">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>当前求和为{{number}}</h2>
        <button @click="add">点我nubmer++</button>
        <button @click="sentStudentName">把学生名给App</button>
        <button @click="unbind">解绑atguigu事件</button>

        <button @click="death">销毁当前Student组件的实例(vc)</button>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data(){
            return {
                number: 0,
                name: '张三',
                sex: '男',
            }
        },
        methods:{
            add(){
                console.log('add被回调了');
                this.number++;
            },
            sentStudentName(){
                this.$emit('atguigu', this.name, '666', '888');
                // this.$emit('demo');
            },
            unbind(){
                this.$off('atguigu'); // 解绑一个自定义事件
                // this.$off(['atguigu', 'demo']); // 解绑多个自定义事件
                // this.$off(); // 解绑所有的自定义事件
            },
            death(){
                // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全部都不再生效
                this.$destroy();
            },
        }
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>